<!DOCTYPE html> 
<html lang="en">
<head>   
     
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
  <!-- Title -->  
  <title>Gift Oasis | Gift Shop</title>
 
  <!-- Favicon -->
  

  <!-- Font-Awesome (CSS) -->
  <link rel="stylesheet" href="static/css/all.min.css">

  <!-- Swiper (CSS) -->
  <link rel="stylesheet" href="static/css/swiper-bundle.min.css">

  <!-- Custom Stylesheets -->
  <link rel="stylesheet" href="static/css/main.css">
  <link rel="stylesheet" href="static/css/responsive.css">

</head>
<body>

  <!-- ==================== Scroll-Top Area (Start) ==================== -->
  <a href="#" class="scroll-top">
    <i class="fas fa-long-arrow-alt-up"></i>
  </a>
  <!-- ==================== Scroll-Top Area (End) ==================== -->
<header class="header">
  <div class="header-2">

    <div id="menu-btn" class="icon fa-solid fa-bars-staggered"></div>

    <!-- == Logo == -->
    <a class="logo" href="index.html">
      <img src="static/picture/Logo.png" alt="logo">
      <div class="logo-name">
        <h3>礼物商城</h3>
      </div>
    </a>

    <div class="container">

      <!-- == Navbar == -->
      <nav class="navbar">

        <a class="nav-btn" href="index.html">首页</a>

        <div class="dropdown-menu">
          <button class="nav-btn"><a class="nav-btn" href="About.html">关于我们</a> </button>
          <div class="dropdown-content">

          </div>
        </div>

        <div class="dropdown-menu">
          <button class="nav-btn">登陆注册</a> <i class="fas fa-angle-down"></i> </button>
          <div class="dropdown-content">


            <a href="Login.html">login</a>
            <a href="Register.html">register</a>

          </div>
        </div>

        <div class="dropdown-menu">
          <button class="nav-btn"><a class="nav-btn" href="Categories.html">商品列表</a><i class="fas fa-angle-down"></i>
          </button>
          <div class="dropdown-content">
            <a href="Product-Single.html">商品详情</a>
            <a href="Cart.html">购物车</a>
            <a href="Order-Single.html">订单详情</a>
          </div>
        </div>

        <div class="dropdown-menu">
          <button class="nav-btn"><a class="nav-btn" href="Blog-Grid.html">新闻列表</a></button>
          <div class="dropdown-content">



          </div>
        </div>

        <a class="nav-btn" href="Contact.html">联系我们</a>

      </nav>

      <!-- == Icon Container == -->
      <div class="icon-container">
        <div id="search-btn" class="icon fa-solid fa-magnifying-glass"></div> <!-- Search Icon -->
        <a href="Login.html" id="login" class="icon fas fa-user"></a>
        <a href="Cart.html" id="cart"> <!-- Cart Page Link -->
          <i class="icon fas fa-shopping-cart"></i>
          <span class="badge">5</span> <!-- Cart Items Count (Badge) -->
        </a>
      </div>

      <!-- == Search Container == -->
      <form class="search-container">
        <input type="search" id="search-bar" placeholder="search here" required=""> <!-- Search Input -->
        <button type="submit"><i class="fas fa-search"></i></button> <!-- Submit Button -->
      </form>

    </div>

  </div>
  <!-- ===== Header-2 Area (End) ===== -->

  <!-- ===== Mobile Menu Area (Start) ===== -->
  <div class="mobile-menu">

    <nav class="mobile-navbar">

      <div class="nav-link">
        <div class="main-nav-link"> <a class="nav-btn" href="index.html">首页</a> </div>
      </div>

      <div class="nav-link">
        <div class="main-nav-link">
          <div class="nav-btn"><a href="About.html">关于我们</a></div></i>
        </div>
        <div class="sub-nav-link">

        </div>
      </div>

      <div class="nav-link">
        <div class="main-nav-link">
          <div class="nav-btn">登录注册</div> <i class="fas fa-plus"></i>
        </div>
        <div class="sub-nav-link">
          <a href="Login.html">login</a>
          <a href="Register.html">register</a>
        </div>
      </div>

      <div class="nav-link">
        <div class="main-nav-link">
          <div class="nav-btn"><a href="Categories.html">商品列表</a></div> <i class="fas fa-plus"></i>
        </div>
        <div class="sub-nav-link">
          <a href="Product-Single.html">商品详情</a>
          <a href="Cart.html">购物车</a>
          <a href="Order-Single.html">订单详情</a>
        </div>
      </div>

      <div class="nav-link">
        <div class="main-nav-link">
          <div class="nav-btn"><a href="Blog-Grid.html">新闻列表</a></div>
        </div>
      </div>

      <div class="nav-link">
        <div class="main-nav-link"> <a class="nav-btn" href="Contact.html">关于我们</a> </div>
      </div>

    </nav>

  </div>
  <!-- ===== Mobile Menu Area (End) ===== -->

</header>
  <div class="mobile-menu">
  
    <nav class="mobile-navbar">
  
      <div class="nav-link">
        <div class="main-nav-link"> <a class="nav-btn" href="index.html">首页</a> </div>
      </div>
  
      <div class="nav-link">
        <div class="main-nav-link">
          <div class="nav-btn"><a href="About.html">关于我们</a></div></i>
        </div>
        <div class="sub-nav-link">
  
        </div>
      </div>
  
      <div class="nav-link">
        <div class="main-nav-link">
          <div class="nav-btn">登录注册</div> <i class="fas fa-plus"></i>
        </div>
        <div class="sub-nav-link">
          <a href="Login.html">login</a>
          <a href="Register.html">register</a>
        </div>
      </div>
  
      <div class="nav-link">
        <div class="main-nav-link">
          <div class="nav-btn"><a href="Categories.html">商品列表</a></div> <i class="fas fa-plus"></i>
        </div>
        <div class="sub-nav-link">
          <a href="Product-Single.html">商品详情</a>
          <a href="Cart.html">购物车</a>
          <a href="Order-Single.html">订单详情</a>
        </div>
      </div>
  
      <div class="nav-link">
        <div class="main-nav-link">
          <div class="nav-btn"><a href="Blog-Grid.html">新闻列表</a></div>
        </div>
      </div>
  
      <div class="nav-link">
        <div class="main-nav-link"> <a class="nav-btn" href="Contact.html">关于我们</a> </div>
      </div>
  
    </nav>
  
  </div>
 

  <!-- ==================== About-Us Area (Start) ==================== -->
  <section class="about-us">

    <!-- ========== About Area (Start) ========== -->
    <section class="about"> 

      <!-- About Information -->
      <div class="box-container"> 
    
        <!-- About Image -->
        <div class="image">
          <!-- Sub-Image 1 -->
          <div class="sub-image one">
            <img src="static/picture/About-1.jpg" alt="About-Image1">
          </div>
          <!-- Sub-Images 2 and 3 -->
          <div class="sub-image two">
            <img src="static/picture/About-2.jpg" alt="About-Image2">
            <img src="static/picture/About-3.jpg" alt="About-Image3">
          </div>
        </div>
    
        <!-- About Content -->
        <div class="content"> 
    
          <div class="heading"> 
            <span>关于我们</span> <!-- Sub Heading -->
            <h2>你的目的地为周到的礼物</h2> <!-- Main Heading -->
          </div>
        
          <!-- Description -->
          <p>在礼品店，我们致力于送礼物的艺术，让每一个场合都变得特别。</p> 
            
          <!-- Key Features -->
         <ul class="features"> 
            <li><i class="fa-solid fa-gift"></i><span>策划独特的礼物选择</span></li> <!-- Feature 1 -->
            <li><i class="fa-solid fa-gift"></i><span>给礼物带来快乐</span></li> <!-- Feature 2 -->
            <li><i class="fa-solid fa-gift"></i><span>个性化礼品方案</span></li> <!-- Feature 3 -->
            <li><i class="fa-solid fa-gift"></i><span>通过礼物传递快乐</span></li> <!-- Feature 4 -->
        </ul> 
        
        </div>
    
      </div> 
    
    </section> 
    <!-- ========== About Area (End) ========== -->

    <!-- ========== Count Area (Start) ========== -->
    <div class="counting">

      <!-- Statistic Box 1: Unique Gifts Available Count -->
      <div class="box">
        <div class="info">
          <i class="fas fa-gift"></i> <!-- Gift box icon -->
          <div class="content">
            <h1 class="count" data-count="1000">1000+</h1> <!-- Count of unique gifts available -->
            <h3>Gifts</h3> <!-- Statistic description -->
          </div>
        </div>
      </div>
    
      <!-- Statistic Box 2: Happy Customers Count -->
      <div class="box">
        <div class="info">
          <i class="far fa-smile"></i> <!-- Smiling face icon -->
          <div class="content">
            <h1 class="count" data-count="500">500+</h1> <!-- Count of happy customers -->
            <h3>Customers</h3> <!-- Statistic description -->
          </div>
        </div>
      </div>
    
      <!-- Statistic Box 3: Orders Delivered Count -->
      <div class="box">
        <div class="info">
          <i class="fas fa-truck"></i> <!-- Delivery truck icon -->
          <div class="content">
            <h1 class="count" data-count="2000">2000+</h1> <!-- Count of orders delivered -->
            <h3>Orders</h3> <!-- Statistic description -->
          </div>
        </div>
      </div>
    
      <!-- Statistic Box 4: Dedicated Team Members Count -->
      <div class="box">
        <div class="info">
          <i class="fas fa-users"></i> <!-- Users icon -->
          <div class="content">
            <h1 class="count" data-count="30">30+</h1> <!-- Count of dedicated team members -->
            <h3>Team Members</h3> <!-- Statistic description -->
          </div>
        </div>
      </div>
    
    </div>
    <!-- ========== Count Area (End) ========== -->

    <!-- ========== Team Area (Start) ========== -->
    <section class="team">

      <!-- Section Heading -->
      <div class="heading">
        <span>认识我们的团队</span>
        <h2>我们的团队成员</h2>
      </div>
  
      <!-- Team Members -->
      <div class="box-container">
  
        <!-- Team Member 1 -->
        <div class="team-item">
          <img src="static/picture/Team-1.jpg" alt="Team-Image"> <!-- Team Member Image -->
          <div class="content">
            
            <h3>John Doe</h3> <!-- Team Member Name -->
            <p>Store Manager</p> <!-- Team Member Designation -->
          </div>
        </div>
  
        <!-- Team Member 2 -->
        <div class="team-item">
          <img src="static/picture/Team-2.jpg" alt="Team-Image"> <!-- Team Member Image -->
          <div class="content">
            
            <h3>Jane Smith</h3> <!-- Team Member Name -->
            <p>Sales Associate</p> <!-- Team Member Designation -->
          </div>
        </div>
  
        <!-- Team Member 3 -->
        <div class="team-item">
          <img src="static/picture/Team-3.jpg" alt="Team-Image"> <!-- Team Member Image -->
          <div class="content">
            
            <h3>Michael Anderson</h3> <!-- Team Member Name -->
            <p>Visual Merchandiser</p> <!-- Team Member Designation -->
          </div>
        </div>
  
        <!-- Team Member 4 -->
        <div class="team-item">
          <img src="static/picture/Team-4.jpg" alt="Team-Image"> <!-- Team Member Image -->
          <div class="content">
            
            <h3>Mary Johnson</h3> <!-- Team Member Name -->
            <p>Customer Service</p> <!-- Team Member Designation -->
          </div>
        </div>
  
      </div>
  
    </section>
    <!-- ========== Team Area (End) ========== -->

    <!-- ========== Testimonials Area (Start) ========== -->  
    <section class="testimonial-bg linear-bg">
  
      <!-- Section Heading -->
      <div class="heading">
        <span>我们的客户怎么说</span>
        <h2>客户见证</h2> 
      </div>
    
      <!-- Testimonial Slider -->
      <div class="swiper-container testimonial-slider">
        <div class="swiper-wrapper">
    
          <!-- Testimonial Slide 1 -->
          <div class="swiper-slide testi-item">
            <div class="content">
              <i class="fas fa-sort-down"></i>
              <i class="fas fa-quote-left"></i>
              <p>"这家礼物商城真是我的宝藏店铺！每次来都能找到心仪的礼物，商品种类丰富，品质卓越。购物体验非常愉快，强烈推荐给所有需要送礼的朋友们，绝对让你物超所值！"</p>
              <i class="fas fa-quote-right"></i>
            </div>
            <div class="image">
              <img src="static/picture/Pic-1.jpg" alt="Testimonial-Pic">
              <div class="info">
                <h4>Ava Smith</h4>
                <p>Happy Customer</p>
              </div>
            </div>
          </div>
    
          <!-- Testimonial Slide 2 -->
          <div class="swiper-slide testi-item">
            <div class="content">
              <i class="fas fa-sort-down"></i>
              <i class="fas fa-quote-left"></i>
             <p>"从选购到配送，这家礼物商城都展现出了极高的专业水平。商品的包装精美细致，给收礼人带来了极大的惊喜。服务周到，响应迅速，让我感受到了真正的购物乐趣。下次还会再来光顾！"</p>
              <i class="fas fa-quote-right"></i>
            </div>
            <div class="image">
              <img src="static/picture/Pic-2.jpg" alt="Testimonial-Pic">
              <div class="info">
                <h4>John Anderson</h4>
                <p>Satisfied Customer</p>
              </div>
            </div>
          </div>
    
          <!-- Testimonial Slide 3 -->
          <div class="swiper-slide testi-item">
            <div class="content">
              <i class="fas fa-sort-down"></i>
              <i class="fas fa-quote-left"></i>
              <p>"我对这家礼物商城的满意度简直爆表！商品质量上乘，设计独特，无论是送给亲友还是自用都非常合适。而且他们的客服团队也非常贴心，总是能解答我的各种疑问。真心推荐给每一个需要送礼的人！"</p>
              <i class="fas fa-quote-right"></i>
            </div>
            <div class="image">
              <img src="static/picture/Pic-3.jpg" alt="Testimonial-Pic">
              <div class="info">
                <h4>Laura Miller</h4>
                <p>Pleased Customer</p>
              </div>
            </div>
          </div>
    
          <!-- Testimonial Slide 4 -->
          <div class="swiper-slide testi-item">
            <div class="content">
              <i class="fas fa-sort-down"></i>
              <i class="fas fa-quote-left"></i>
              <p>"这家礼物商城真的是我的首选购物平台！不仅商品种类丰富多样，而且每一件都精致美观，能够体现出送礼人的心意。他们的配送速度也非常快，让我能够及时将礼物送到收礼人手中。总之，我非常满意，强烈推荐给大家！"</p>
              <i class="fas fa-quote-right"></i>
            </div>
            <div class="image">
              <img src="static/picture/Pic-4.jpg" alt="Testimonial-Pic">
              <div class="info">
                <h4>David Johnson</h4>
                <p>Delighted Customer</p>
              </div>
            </div>
          </div>
    
        </div>
    
        <!-- Testimonial Slider Pagination -->
        <div class="swiper-pagination swiper-pagination3"></div>
    
      </div>
      
    </section>
    <!-- ========== Testimonials Area (End) ========== -->

    <!-- ========== Partners Area (Start) ========== -->
    <section class="partners">
    
      <!-- Partner Slider Container -->
      <div class="swiper-container partner-slider">

        <!-- Partners Logo -->
        <div class="swiper-wrapper">
          <div class="swiper-slide partner-item"><a href="#"><img src="static/picture/Partner-1.png" alt="Partner-Logo"></a></div>
          <div class="swiper-slide partner-item"><a href="#"><img src="static/picture/Partner-2.png" alt="Partner-Logo"></a></div>
          <div class="swiper-slide partner-item"><a href="#"><img src="static/picture/Partner-3.png" alt="Partner-Logo"></a></div>
          <div class="swiper-slide partner-item"><a href="#"><img src="static/picture/Partner-4.png" alt="Partner-Logo"></a></div>
          <div class="swiper-slide partner-item"><a href="#"><img src="static/picture/Partner-5.png" alt="Partner-Logo"></a></div>
          <div class="swiper-slide partner-item"><a href="#"><img src="static/picture/Partner-6.png" alt="Partner-Logo"></a></div>
          <div class="swiper-slide partner-item"><a href="#"><img src="static/picture/Partner-1.png" alt="Partner-Logo"></a></div>
          <div class="swiper-slide partner-item"><a href="#"><img src="static/picture/Partner-2.png" alt="Partner-Logo"></a></div>
          <div class="swiper-slide partner-item"><a href="#"><img src="static/picture/Partner-3.png" alt="Partner-Logo"></a></div>
          <div class="swiper-slide partner-item"><a href="#"><img src="static/picture/Partner-4.png" alt="Partner-Logo"></a></div>
        </div>
      </div> 

    </section>    


  </section>
  <!-- ==================== About-Us Area (End) ==================== -->


    
  <!-- ==================== Footer Area (Start) ==================== -->
  <footer class="footer">
  
    <div class="box-container">
  
      <!-- == Gift Shop Description & Social Account Links == -->
      <div class="footer-item">
  
        <!-- Logo -->
        <a class="logo" href="">
          <img src="static/picture/Logo.png" alt="logo">
          <div class="logo-name">
            <h3>礼物商城</h3>
          </div>
        </a>
        <!-- Description -->
        <p>在我们的礼品店探索周到和独特的礼物。无论在什么场合，都要为你爱的人挑选一份完美的礼物。</p>
        <!-- Social Account Links -->
        <div class="social">
          <a href="#"><i class="fab fa-facebook-f"></i></a>
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-instagram"></i></a>
          <a href="#"><i class="fab fa-linkedin"></i></a>
        </div>
  
      </div>
  
      <!-- == Useful Links == -->
      <div class="footer-item">
        <h2>useful links</h2>
        <div class="info links pages">
          <div class="links-item">
            <p><i class="fas fa-square-full"></i><a href="index.html">首页</a></p>
            <p><i class="fas fa-square-full"></i><a href="About.html">关于我们</a></p>
            <p><i class="fas fa-square-full"></i><a href="Login.html">登录</a></p>
            <p><i class="fas fa-square-full"></i><a href="Register.html">注册</a></p>
          </div>
          <div class="links-item">
            <p><i class="fas fa-square-full"></i><a href="Categories.html">商品列表</a></p>
            <p><i class="fas fa-square-full"></i><a href="Product-Single.html">商品详情</a></p>
            <p><i class="fas fa-square-full"></i><a href="Cart.html">购物车</a></p>
            <p><i class="fas fa-square-full"></i><a href="Contact.html">联系我们</a></p>
          </div>
        </div>
      </div>
  
      <!-- == Product Categories == -->
  
  
      <!-- == Contact Information == -->
      <div class='footer-item'>
        <h2>contact info</h2>
        <div class="info connect">
          <p><i class="fas fa-phone"></i><span>+111-222-333</span></p>
          <p><i class="fas fa-phone"></i><span>+123-456-789</span></p>
          <p><i class="fas fa-envelope"></i><span class="gmail">abc@gmail.com</span></p>
          <p><i class="fas fa-envelope"></i><span class="gmail">xyz@gmail.com</span></p>
          <p><i class="fas fa-map"></i><span>karachi, pakistan</span></p>
        </div>
      </div>
  
    </div>
  
  </footer>
  <!-- ==================== Footer Area (End) ==================== -->



  <!-- Jquery -->
  <script src="static/js/jquery.min.js"></script>

  <!-- Swiper (JS) -->
  <script src="static/js/swiper-bundle.min.js"></script>

  <!-- Custom Script Files -->
  <script src="static/js/script.js"></script> <!-- Custom JavaScript file with additional website functionality. -->
  <script src="static/js/nav-link-toggler.js"></script> <!-- Manages navigation link toggling (e.g., hamburger menu) for mobile devices -->
  <script src="static/js/partner-slider.js"></script> <!-- Controls the interactive Partner Slider for showcasing business partners or sponsors. -->
  <script src="static/js/counter-up.js"></script> <!-- Manages the "Counter Up" feature to animate numerical counting on the website. -->
  <script src="static/js/testi-slider.js"></script> <!-- Controls the interactive Testimonial Slider for showcasing customer testimonials. -->


</body>
</html>